@charset "utf-8";
@import "reset";


@font-face {
    font-family: 'iconfont';
    /* project id 541915 */
    src: url('//at.alicdn.com/t/font_541915_ruyt5ad75wylow29.eot');
    src: url('//at.alicdn.com/t/font_541915_ruyt5ad75wylow29.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_541915_ruyt5ad75wylow29.woff') format('woff'), url('//at.alicdn.com/t/font_541915_ruyt5ad75wylow29.ttf') format('truetype'), url('//at.alicdn.com/t/font_541915_ruyt5ad75wylow29.svg#iconfont') format('svg');
}

.iconfont {
    font-size: 20px;
    font-family: iconfont;
    font-style: normal;
    color: white;
}

.header {
    height: 8vh;
    width: 100%;
    background: #282828;
    color: #9a9a9a;
    line-height: 8vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .title_icon {
        width: 8vh;
        height: 8vh;
        text-align: center;
        border-right: 1px solid #333333;
    }
    .title {
        padding-left: 2vw;
    }
    .user {
        width: 8vh;
        height: 8vh;
        text-align: center;
    }
    .city {
        width: 8vh;
        height: 8vh;
        padding: 0 1vw;
        text-align: center;
    }
}

.zz {
    width: 100%;
    height: 92vh;
    ;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #282828;
    opacity: 0.5;
    z-index: 90;
}

.aside {
    width: 70vw;
    height: 92vh;
    z-index: 190;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #282828;
    border-top: 1px solid #333333;
    div {
        height: 8vh;
        line-height: 8vh;
        font-size: 14px;
        color: #9a9a9a;
        padding: 0 3vw;
        border-bottom: 1px solid #333333;
    }
}

.boom-enter {
    left: -70vw;
    opacity: 0;
}

.boom-enter-active {
    transition: all .5s ease-in-out;
}

.boom-enter-to {
    left: 0;
}

.boom-leave {
    left: 0;
    opacity: 1;
}

.boom-leave-active {
    transition: all .3s ease-in-out;
}

.boom-leave-to {
    left: -70vw;
    opacity: 0;
}